<template>
  <section>
      <div class="filter-container">
            <common-input @keyup.enter.native="handleFilter" class="w200 ml10" placeholder="关键词" v-model="listQuery.keyword" />
            <el-button size="mini" class="ml10" type="primary" icon="el-icon-search" @click="handleFilter">搜索</el-button>
            <el-button size="mini" class="ml10" @click="handleCreate" type="primary" icon="el-icon-plus">新增</el-button>
        </div>
        <el-table :data="list" :height="tableHeight"
                style="width: 100%">
            <el-table-column align="left" label="查找词">
                <template slot-scope="scope">
                    <span>{{scope.row.find}}</span>
                </template>
            </el-table-column>
            <el-table-column align="left" label="过滤动作">
                <template slot-scope="scope">
                    <span>{{scope.row.typeText}}</span>
                </template>
            </el-table-column>
            <el-table-column align="left" label="替换词">
                <template slot-scope="scope">
                    <span>{{scope.row.replacement}}</span>
                </template>
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="100">
                <template slot-scope="scope">
                    <el-dropdown>
                        <el-button type="text">操作<i class="el-icon-arrow-down el-icon--right"></i></el-button>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item @click.native="handleUpdate(scope.row)">编辑</el-dropdown-item>
                            <el-dropdown-item @click.native="handleDelete(scope.row)">删除</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination-container">
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.pageNum" :page-sizes="[20,30, 50]" :page-size="listQuery.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination>
        </div>
        <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :close-on-click-modal="false" width="500px" @close="dialogClose">
            <el-form :model="form" :rules="rules" ref="form" label-width="150px">
                <el-form-item label="关键词" prop="find">
                    <common-input v-model="form.find" placeholder="请输入关键词" />
                </el-form-item>
                <el-form-item label="过滤动作" prop="type">
                    <el-select size="mini" v-model="form.type" clearable>
                        <el-option
                                v-for="item in typeList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="替换词" prop="replacement" v-if="form.type=='{REPLACE}'">
                    <common-input v-model="form.replacement" placeholder="请输入替换词" />
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button size="mini" @click="cancel('form')">取消</el-button>
                <el-button size="mini" type="primary" @click="save('form')">确定</el-button>
            </div>
        </el-dialog>
  </section>
</template>

<script>
    import {
        isIntegerNotMust
    } from '../../utils/validator'
    import {
        common_word_list,
        common_word_save,
        common_word_del,
        common_word_detail
    } from '../../api/common_word';
export default {
    components: {
    },
  data() {
    return {
        tableHeight: 200,
        list: null,
        listLoading: true,
        listQuery: {
            keyword: undefined,
            pageNum: 1,
            pageSize: 20,
        },
        total: null,
        dialogStatus: '',
        dialogFormVisible: false,
        textMap: {
            update: '编辑关键词',
            create: '新增关键词'
        },
        typeList: [
            {
                value: "{BANNED}",
                label: '禁止关键词'
            },
            {
                value: "{REPLACE}",
                label: '替换关键词'
            }
        ],
        form: {
            find: undefined,
            replacement: undefined,
            id: undefined,
            type: "{BANNED}"
        },
        rules: {
            find: [
                {
                    required: true,
                    message: '请输入关键词',
                    trigger: 'blur'
                }
            ],
            replacement: [
                {
                    required: true,
                    message: '请输入替换目标',
                    trigger: 'blur'
                }
            ],
        },
    }
  },
    mounted() {
        const that = this

        window.onresize = () => {

            return (() => {

                that._getTableHeight()

            })()
        }
    },
  created() {
    this._getTableHeight();
    this.getList();
  },

  methods: {
    _getTableHeight() {
        this.tableHeight = window.innerHeight - 250
    },
    getList() {
        this.listLoading = true;
        common_word_list(this.listQuery).then(response => {
            this.list = response.data.list;
            this.total = response.data.total;
            this.listLoading = false;

            console.log(this.list)
        })
    },
    handleCreate() {
        this.resetTemp();
        this.dialogStatus = 'create';
        this.dialogFormVisible = true;
    },
    resetTemp() {
        this.form = {
            find: undefined,
            replacement: undefined,
            id: undefined,
            type: "{BANNED}",
        };
    },
    save(formName) {
        // const set = this.$refs;
        // console.log(set);
        this.$refs.form.validate(valid => {
            if (valid) {
                if(this.form.type == "{BANNED}") {
                    this.form.replacement = "{BANNED}";
                } else {
                    if(!this.form.replacement) {
                        this.$message.error("请填写替换词");
                        return;
                    }
                }
                common_word_save(this.form)
                    .then(() => {
                        this.dialogFormVisible = false;
                        this.getList();
                        this.$message.success("关键词添加成功");
                    })
            } else {
                return false;
            }
        });
    },
    cancel(formName) {
        this.dialogFormVisible = false;
        this.$refs[formName].resetFields();
    },
    handleUpdate(row) {
        common_word_detail(row.id)
            .then(response => {
                this.form = response.data;
                this.dialogFormVisible = true;
                this.dialogStatus = 'update';
            });
    },
    handleDelete(row) {
        this.$confirm('此操作将永久删除, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        })
            .then(() => {
                common_word_del(row.id)
                    .then(() => {
                        this.$message.success("关键词删除成功");
                        const index = this.list.indexOf(row);
                        this.list.splice(index, 1);
                    });
            }).catch(()=>{});
    },
    dialogClose() {
        this.$refs.form.resetFields();
    },
    handleFilter() {
        this.getList();
    },
    handleSizeChange(val) {
        this.listQuery.pageSize = val;
        this.getList();
    },
    handleCurrentChange(val) {
        this.listQuery.pageNum = val;
        this.getList();
    }
  }
};
</script>
